<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>客户信息完善</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/Information.css">
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
    <script src="js/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container-fluid CustomerInformation">
    <p class="text-center">临时客户信息完善</p>
    <form action="">
        <div class="row">
            <div class="CustomerInformation_firstLine clear">
                <ul class="clear">
                    <li class="CustomerInformation_lineHeight">客户编码：<span>1232655</span></li>
                    <li>客户姓名：<input type="text"></li>
                    <li class="firstLine_tel">联系电话：<input type="text">
                        <span></span>
                        <div class="AddTel">
                            <ul>
                                <li>号 &nbsp;&nbsp; &nbsp;码1：<input type="text"><span>*主号码</span></li>
                                <li>号 &nbsp;&nbsp; &nbsp;码2：<input type="text"></li>
                            </ul>
                            <div class="tianjia">
                                <span></span>
                            </div>
                            <div class="tianjia_btn"><input type="button" class="btn btn-primary" value="确定"><input type="button" class="btn btn-default close_tianjia" value="取消"></div>
                        </div>
                    </li>
                    <li class="dropdown">客户等级：<input id="drop1" data-toggle="dropdown" aria-haspopup="true" role="button"
                                                     aria-expanded="true" type="text" readonly="readonly" class="ipticon dropdown-toggle">
                        <ul class="dropdown_ul dropdown-menu" aria-labelledby="drop1">
                            <li>普通客户</li>
                            <li>VIP</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="CustomerInformation_firstLine clear">
                <ul class="clear">
                    <li class="dropdown">性 &nbsp;&nbsp; &nbsp;&nbsp; 别：<input id="drop2" data-toggle="dropdown" aria-haspopup="true" role="button"
                                                                              aria-expanded="true"type="text" readonly="readonly" class="ipticon dropdown-toggle">
                        <ul class="dropdown_ul dropdown-menu" aria-labelledby="drop2">
                            <li>男</li>
                            <li>女</li>
                        </ul>
                    </li>
                    <li>年 &nbsp;&nbsp; &nbsp;&nbsp; 龄：<input type="text"></li>
                    <li class="dropdown">婚姻状况：<input id="drop3" data-toggle="dropdown" aria-haspopup="true" role="button"
                                                     aria-expanded="true" type="text" readonly="readonly" class="ipticon dropdown-toggle">
                        <ul class="dropdown_ul dropdown-menu" aria-labelledby="drop3">
                            <li>未婚</li>
                            <li>已婚</li>
                        </ul>
                    </li>
                    <li class="dropdown">客户类型：<input id="drop4" data-toggle="dropdown" aria-haspopup="true" role="button"
                                                     aria-expanded="true" type="text" readonly="readonly" class="ipticon dropdown-toggle">
                        <ul class="dropdown_ul dropdown-menu" aria-labelledby="drop4">
                            <li>系统客户</li>
                            <li>普通客户</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="CustomerInformation_number clear">
                <ul class="clear">
                    <li>身份证号：<input type="text"></li>
                    <li> &nbsp; &nbsp; E-mail：<input type="text"></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="CustomerInformation_number clear">
                <ul class="clear">
                    <li> QQ 号码：<input type="text"></li>
                    <li>&nbsp;微信号码：<input type="text"></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="CustomerInformation_address clear">
                <ul class="clear">
                    <li class="dropdown">地 &nbsp; &nbsp; &nbsp;址：<input id="drop5" data-toggle="dropdown" aria-haspopup="true" role="button"
                                                                        aria-expanded="true" type="text" readonly="readonly" class="ipticon dropdown-toggle"> 省&nbsp;
                        <ul class="dropdown_ul province dropdown-menu" aria-labelledby="drop5">
                            <li>湖南省</li>
                            <li>湖北省</li>
                            <li>山东省</li>
                        </ul>
                    </li>
                    <li class="dropdown"><input id="drop6" data-toggle="dropdown" aria-haspopup="true" role="button"
                                                aria-expanded="true" type="text" readonly="readonly" class="ipticon"> 市&nbsp;
                        <ul class="dropdown_ul dropdown-menu" aria-labelledby="drop6">
                            <li>长沙市</li>
                            <li>武汉市</li>
                            <li>济南市</li>
                        </ul>
                    </li>
                    <li class="dropdown"><input id="drop7" data-toggle="dropdown" aria-haspopup="true" role="button"
                                                aria-expanded="true" type="text" readonly="readonly" class="ipticon"> 县/区&nbsp;
                        <ul class="dropdown_ul dropdown-menu" aria-labelledby="drop6">
                            <li>长沙县</li>
                            <li>县县县</li>
                            <li>什么县</li>
                        </ul>
                    </li>
                    <li class="Detailed"><input type="text" placeholder="详细地址"></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="clear">
                <div class="ServiceType">
                    <span>业务类型：</span>
                    <input type="checkbox">融资
                    <input type="checkbox">购车
                    <input type="checkbox">ETC
                    <input type="checkbox">保险
                    <input type="checkbox">租车
                    <input type="checkbox">城际
                    <input type="checkbox">二手车
                </div>
            </div>
        </div>
        <div class="row">
            <div class="clear">
                <div class="Remarks">
                    <span>备 &nbsp;&nbsp; &nbsp;&nbsp;注：</span>
                    <textarea name="" id="" cols="100" rows="4" placeholder="请输入备注信息..."></textarea>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="clear hold">
                <input type="button" value="保存" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
            </div>
        </div>
        <div class="modal fade bs-example-modal-sm in" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" >
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="mySmallModalLabel">客户信息完善</h4>
                    </div>
                    <div class="modal-body">
                        保存成功！
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
    </form>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
    (function(){//下拉菜单
        var down =  $(".dropdown");
        for(var i=0;i<down.length;i++){
            var down_li = $(down[i]).find(".dropdown_ul").children("li");
            for(var c=0;c<down_li.length;c++){
                $(down_li[c]).click(function(){
                    $(this).parent().parent().children("input").val(this.innerText);
                    $(this).parent().parent().children("span").html(this.innerText);
                })
            }
        }
    })();
    $(".firstLine_tel>span").click(function(){
        $(".AddTel").toggle();
    })
    $(".close_tianjia").click(function(){
        $(".AddTel").hide();
    })
    /**///
    var num=2;
    $(".tianjia>span").click(function(){
        if(num<5){
            num++;
            $(".AddTel>ul").append("<li>号 &nbsp;&nbsp; &nbsp;码"+num+"：<input type='text'><span class='glyphicon glyphicon-remove-circle close_this'></span></li>");
            $(".close_this").click(function(){
                $(this).parent().remove();
            });
        }else{
            console.log("最多添加5个");
        }
    });
</script>
</body>
</html>